<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

        :root {
            --line-border-fill: #3498db;
            --line-border-empty: #e0e0e0;
        }

        * {
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            overflow: hidden;
            background-color: #fff;
            font-family: 'Arial', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }

        .container {
            text-align: center;
        }

        .progress-container {
            width: 350px;
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-bottom: 30px;
            max-width: 100%;
        }

        .progress-container::before {
            content: '';
            /* background-color: #e0e0e0; */
            background-color: var(--line-border-empty);
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 4px;
            width: 100%;
            z-index: -1;
        }

        .progress {
            /* background-color: #3498db; */
            background-color: var(--line-border-fill);
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 4px;
            width: 0%;
            z-index: -1;
            transition: 0.4s ease-in;
        }

        .circle {
            background-color: #fff;
            color: #999;
            height: 30px;
            width: 30px;
            /* border: 3px solid #e0e0e0; */
            border: 3px solid var(--line-border-empty);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.4s ease;
        }

        .circle.active {
            /* border-color: #3498db; */
            border-color: var(--line-border-fill);
        }

        .btn {
            /* background-color: #3498db; */
            background-color: var(--line-border-fill);
            color: #fff;
            border: 0;
            border-radius: 6px;
            cursor: pointer;
            font-family: inherit;
            padding: 8px 30px;
            margin: 5px;
            font-size: 14px;
        }

        .btn:active {
            transform: scale(0.98);
        }

        .btn:focus {
            outline: 0;
            border: 1px dashed lightgreen;
        }

        .btn:disabled {
            /* background-color: #e0e0e0; */
            background-color: var(--line-border-empty);
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="progress-container">
            <!-- 横线 -->
            <div class="progress" id="progress"></div>
            <div class="circle active">1</div>
            <div class="circle">2</div>
            <div class="circle">3</div>
            <div class="circle">4</div>
        </div>

        <button class="btn" id="Prev" disabled>Prev</button>
        <button class="btn" id="Next">Next</button>
    </div>

    <script>
        const progress = document.querySelector('#progress')
        const prev = document.querySelector('#Prev')
        const next = document.querySelector('#Next')
        const circles = document.querySelectorAll('.circle')

        // 设置一个全局变量
        let num = 1

        next.addEventListener('click', function () {
            num++
            if (num > circles.length) {
                num = circles.length
            }
            // 重新渲染
            update()
        })

        prev.addEventListener('click', function () {
            num--

            if (num < 1) {
                num = 1
            }

            // 重现渲染
            update()
        })

        function update() {
            // for (let i = 0; i < circles.length; i++) {
                
            //     if (circles[i] < num) {
            //         circles[i].classList.add('active')
            //     } else {
            //         circles[i].classList.remove('active')
            //     }
            // }
            circles.forEach((circle,index)=>{
                console.log(index);
                if (index < num) {
                    circle.classList.add('active')
                } else {
                    circle.classList.remove('active')
                }
            })

            const actives = document.querySelectorAll('.active')
            progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'
            if (num === 1) {
                prev.disabled = true
            } else if (num === circles.length) {
                next.disabled = true
            } else {
                prev.disabled = false
                next.disabled = false
            }
        } 
    </script>
</body>

</html>